<!DOCTYPE HTML>
<html>
<head>
	<title>pixi.js example 6 Interactivity</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #000000;
		}
		
		#help{
			position: absolute;
			z-index: 20;
			color: black;
			top: 20px;
			left: 120px;
		}
	</style>


	
	<script src="pixi.js"></script>
</head>
<body>
	<script>
		
	// create an new instance of a pixi stage
	// the second parameter is interactivity...
	var interactive = true;
	var stage = new PIXI.Stage(0x000000, interactive);
	
	// create a renderer instance.
	var renderer = PIXI.autoDetectRenderer(620, 400);
	
	// add the renderer view element to the DOM
	document.body.appendChild(renderer.view);
	
	requestAnimFrame( animate );
	
	// create a background..
	var background = PIXI.Sprite.fromImage("button_test_BG.jpg");
	
	// add background to stage..
	stage.addChild(background);
	
	// create some textures from an image path
	var textureButton = PIXI.Texture.fromImage("button.png");
	var textureButtonDown = PIXI.Texture.fromImage("buttonDown.png");
	var textureButtonOver = PIXI.Texture.fromImage("buttonOver.png");
	
	var buttons = [];
	
	var buttonPositions = [175,75,
						   600-145, 75,
						   600/2 - 20, 400/2 + 10,
						   175, 400-75,
						   600-115, 400-95];
						   
						   
	for (var i=0; i < 5; i++) 
	{
		var button = new PIXI.Sprite(textureButton);
		button.buttonMode = true;
		
		button.anchor.x = 0.5;
		button.anchor.y = 0.5;
		
		button.position.x = buttonPositions[i*2];
		button.position.y = buttonPositions[i*2 + 1];
		
		// make the button interactive..		
		button.setInteractive(true);
		
		// set the mousedown and touchstart callback..
		button.mousedown = button.touchstart = function(data){
			
			this.isdown = true;
			this.setTexture(textureButtonDown);
			this.alpha = 1;
		}
		
		// set the mouseup and touchend callback..
		button.mouseup = button.touchend = button.mouseupoutside = button.touchendoutside = function(data){
			this.isdown = false;
			
			if(this.isOver)
			{
				this.setTexture(textureButtonOver);
			}
			else
			{
				this.setTexture(textureButton);
			}
		}
		
		// set the mouseover callback..
		button.mouseover = function(data){
			
			this.isOver = true;
			
			if(this.isdown)return
			
			this.setTexture(textureButtonOver)
		}
		
		// set the mouseout callback..
		button.mouseout = function(data){
			
			this.isOver = false;
			if(this.isdown)return
			this.setTexture(textureButton)
		}
		
		button.click = function(data){
			// click!
			console.log("CLICK!");
		//	alert("CLICK!")
		}
		
		button.tap = function(data){
			// click!
			console.log("TAP!!");
			//this.alpha = 0.5;
		}
		
		// add it to the stage
		stage.addChild(button);
		
		// add button to array
		buttons.push(button);
	};
	
	// set some silly values..
	
	buttons[0].scale.x = 1.2;
	 
	buttons[1].scale.y = 1.2;
	  
	buttons[2].rotation = Math.PI/10;
	
	buttons[3].scale.x = 0.8;
	buttons[3].scale.y = 0.8;
	
	buttons[4].scale.x = 0.8;
	buttons[4].scale.y = 1.2;
	buttons[4].rotation = Math.PI;
	// var button1 = 
	function animate() {
	
	    requestAnimFrame( animate );
	    // render the stage   
	    
	    // do a test..
	   	
	    renderer.render(stage);
	}
	
	// add a logo!
	var pixiLogo = PIXI.Sprite.fromImage("pixi.png");
	stage.addChild(pixiLogo);
	
	pixiLogo.position.x = 620 - 56;
	pixiLogo.position.y = 400- 32;
	
	pixiLogo.setInteractive(true);
	
	pixiLogo.click = pixiLogo.tap = function(){
		
		var win=window.open("https://github.com/GoodBoyDigital/pixi.js", '_blank');
		
	}
	</script>

	</body>
</html>
